<template>
    <view style="width: 100%;" class="add">
        <view class="uni-title uni-common-mt uni-common-pl" style="height: 70upx;width: 100%;background-color: #f3f3f3;line-height: 70upx;"><input type="text"  v-model="title" placeholder="请输入培训问题"  style="line-height: 70upx;margin-top: 20upx;margin-left: 40upx;"/></view>
        <view class="uni-list" style="margin-top: 10upx;">
            <radio-group @change="radioChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
                    <view>
                        <radio :value="item.value" :checked="index === current" />
                    </view>
                    <!-- <view>{{item.name}}</view> -->
					<input class="answer" type="text" v-model="item.name" placeholder="请输入选项内容,打勾为正确答案" />
					<uni-icons type="closeempty" size="32" @click="reoptions(index)"></uni-icons>
                </label>
            </radio-group>
        </view>
		
		<view class="addoptions tCenter pT5"  @click="addoptions" v-if="addoptionschanger && items.length<4">
				<uni-icons type="plusempty" size="25" style="background-color: #09BB07;border-radius: 50%; color: white; font-weight: bold; margin-left: -5upx;" ></uni-icons>
				<span style="margin-left: 5upx;margin-top: 2upx;">添加选项</span>
		</view>
		<!--  <text class="tips">选中为正确答案</text> -->
		<view class="register w70 mauto" @click="subsubj">
			提交
		</view>
		<backnext></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
    </view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {questionadd} from "@/common/api/topics.js"
	import {userinfo} from '../../common/api/user.js'; //引进requst方法
export default {
	components: {
	        uniIcons
	 },
    data() {
        return {
			title:"",
			tik:['1','2','3','4'],
            items: [{
                    value: '0',
                    name: '',
					// checked: 'false'
					tik:'0'
                },
				{
				    value: '1',
				    name: '',
					tik:'1'
				}
            ],
			questionform:{},
			addoptionschanger:true,
            current: 0,
			showclick:true,
			uinfo:{}
        }
    },
	onLoad(){
		uni.getStorage({
			key: 'userinfo',
			success: res => {
				this.uinfo = res.data
		
			}
		});
		
	},
    methods: {
        radioChange: function(evt) {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.target.value) {
                    this.current = i;
                    break;
                }
            }
        },  
		/*重置 radioval*/
		reloadradiovalue:function(){
			 for (let i = 0; i < this.items.length; i++) {
				 this.items[i].value = ''+i
				 this.items[i].tik = this.tik[i]
			 }
		},
		/*添加内容选项*/
		addoptions:function(){
			var itemssum = this.items.length
			this.items.push({
				value:''+itemssum,
				name:'',
				tik:''+itemssum,
			})
			if(itemssum>=3){this.addoptionschanger = false;return}
		},
		/*删除选项*/
		reoptions:function(e){
			if(this.items.length<=4){this.addoptionschanger = true}
			if(this.items.length==2){this.addoptionschanger = true;this.reloadradiovalue();return}
			this.$delete(this.items, e)
			this.reloadradiovalue()
		},
		/*添加训练题*/
		subsubj:function(){
			let that=this;
			var tmpoptions = ''
			tmpoptions = JSON.stringify(this.items)
			// console.log(tmpoptions)
			// return 
			var goloadin=true;
			for (let i = 0; i < this.items.length; i++) {
				// tmpoptions = tmpoptions+this.items[i].name+','
				if(!this.items[i].name){
					goloadin=false;
				}
			}
			// tmpoptions = tmpoptions.substr(0,tmpoptions.length-1);
			if(!this.title){
				uni.showToast({
				    icon: 'none',
				    title: '请输入标题',
				    duration: 3000
				});
				return;
			}if(!goloadin){
				uni.showToast({
				    icon: 'none',
				    title: '请输入答案',
				    duration: 3000
				});
				return;
			}
			if(this.showclick){
				uni.showLoading({
				    title: '正在进行相关操作...'  
				});
				this.showclick=false;
			this.questionform = {
				'companyid':this.uinfo.companyid,
				'question':this.title,
				'options':tmpoptions,
				'answer':this.current
			}
			questionadd(this.questionform).then(res=>{
				if(res.data.code==200){
					this.showclick=true;
					uni.showToast({
					    icon: 'none',
					    title: '添加成功,即将返回列表',
					    duration: 3000
					});
					setTimeout(function() { 
					// 	that.backrefresh('123')
						uni.navigateTo({
						    url: './trainingTopicslist'
						});
						// uni.switchTab({
						// 	url: './trainingTopicslist'
						// });
					},2000)
					
				}else{
					uni.showToast({
					    icon: 'none',
					    title: '网络繁忙,请稍后再试',
					    duration: 2000
					});
				
				}
			})
			}
			/*提交请求*/
		}
    }
}
</script>

<style lang="scss">
	.add{
	.uni-title{
		width: 95%;
		margin: auto;
	}
	.uni-list{
		/* width: 95%; */
		margin: auto;
	}
	.answer {
    display: block;
    font-size: 16px;
    line-height: 1.4em;
    height: 1.4em;
    min-height: 1.4em;
    overflow: hidden;
    margin-right: auto;
    width: 100%;
}
.register{
	// width: 143px;
		height: 42px;
		color: rgba(255, 255, 255, 1);
		background-color: rgba(42, 130, 228, 1);
		border-radius: 5px;
		font-size: 15px;
		line-height: 42px;
		text-align: center;
		margin: auto;
		margin-top: 30px;
}
.addoptions{
	// background-image: ;
	// position: fixed;
	width:100%;
	
}
}
</style>
